<template>
	<view class="demand-info">
		<view class="list">
		
			<view v-for="(item,index) in list" :key="index" class="list-item" @click="routeToDetail(item)">
				<view class="list-top">
					<view>
						<text class="title">{{item.demand_type.text}}</text>
						<text class="time">{{item.demand_time}}</text>
					</view>
					<view>
						<text class="tag" :style="{color:levelColor(item.demand_status),borderColor:levelColor(item.demand_status)}">{{item.demand_status.text}}</text>
					</view>
					
					
				</view>
				<view class="list-bottom">
					
					<text>{{item.description}}</text>
					
				</view>
				
			</view>
			<view class="content-bottom"><text>共计&nbsp;&nbsp;{{total}}&nbsp;&nbsp;个需求</text></view>
		</view>
		<view class="footer">
			<tn-button shape="round" fontSize="32" fontBold backgroundColor="#3B54DA" fontColor="#FFFFFF" width="282rpx" height="72rpx" @click="add">
				<!-- <text class="tn-icon-add"></text> -->
				+ 添加需求</tn-button>
		</view>
	</view>
</template>

<script>
	export default{
		name:'contactPerson',
		props:{
			clientId:{
				type:String,
				required:true
			},
			moduleType:{
				type:String,
				default:'single'
			}
		},
		data(){
			return{
				total:0,
				list:[],
				currentPage:1,
				pageSize:10,
			}
		},
		created(){
			
		},
		mounted(){
			//子组件的created快于伏组件的onload
			this.getList();
		},
		// onReachBottom(){
		// 	console.log('onReachBottom')
		// 	if(this.total > this.pageSize * this.currentPage){
		// 		this.currentPage += 1;
		// 		this.getList();
		// 	}
		// },
		methods:{
			routeToDetail(item){
				if(this.moduleType == 'all'){
					this.$Router.push({name:'allDemandDetail',query:{id:item.id}})
				} else {
					this.$Router.push({name:'myDemandDetail',query:{id:item.id}})
				}
				
			},
			loadMore(){
				if(this.total > this.pageSize * this.currentPage){
					this.currentPage += 1;
					this.getList();
				}
			},
			levelColor(level){
				let color = '';
				switch(level.value){
					case '1':color = '#3B54DA';break;
					case '2':color = 'green';break;
					case '3':color = 'orange';break;
					case '4':color = 'red';break;
				}
				return color;
			},
			add(){
				this.$tip.toast('该功能暂未开通')
			},
			getList(){
				const reqData = {
					client_id:this.clientId,
					page:this.currentPage,
					limit:this.pageSize,
				}
				let url = '';
				if(this.moduleType == 'all') {
					url = '/api/business/demand/list';
				} else {
					url = '/api/business/demand/list';
				}
				this.$http.get(url, reqData).then((res) => {
					if(res.data.status == 200) {
						let list= res.data.data.data || [];
						this.list = this.list.concat(list);
						this.currentPage = res.data.data.current_page||1;
						this.pageSize =  res.data.data.per_page||20;
						this.total = res.data.data.total||0;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.demand-info{
		
		font-size: 24rpx;
		.list{
			padding:0rpx 20rpx 112rpx;
			.content-bottom{
				color: #6F6F6F;
				margin:40rpx 0;
				text-align: center;
			}
		}
		.list-item{
			padding:30rpx 20rpx 40rpx ;
			
			border-bottom: 2rpx solid #EFEFEF;
			.list-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				.title{
					font-weight: $Semibold;
					font-size: 28rpx;
					color: #000000;
				}
				.time{
					margin-left: 40rpx;
					color: #6F6F6F;
				
				}
				.tag{
					line-height: 1;
					padding: 6rpx 20rpx;
					border-radius: 32rpx;
					border:2rpx solid #3B54DA;
					color: #3B54DA;
				}
			}
			
			
			.list-bottom{
				width: calc(100% - 112rpx);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #000000;
				line-height: 28rpx;
				font-size: 28rpx;
				
			}
			
		}
		.footer{
			position: fixed;
			bottom: 0;
			width: 100%;
			padding-bottom: env(safe-area-inset-bottom);
			height: calc(112rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: center;
			background: #FFFFFF;
			box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
			align-items: center;
			.button{
				
			}
			
		}
	}
</style>